<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商家产品信息</title>
<style type="text/css">
div.DTTT {
	margin-bottom: 0.5em;
	float: right;
}

div.dataTables_wrapper {
	clear: both;
}
</style>


<script type="text/javascript">
$(document).ready(function() {
	var table =$('#example').dataTable({
    	"oLanguage" : { // 汉化
    		"sProcessing" : "正在加载数据...",
    		"sLengthMenu" : "_MENU_记录/页 ",
    		"sZeroRecords" : "没有您要搜索的内容",
    		"sInfo" : "显示第_START_ 至 _END_ 条记录 ，共 _TOTAL_ 项",
    		"sInfoEmpty" : "记录数为0",
    		"sInfoFiltered" : "(全部记录数 _MAX_  条)",
    		"sInfoPostFix" : "",
    		"sSearch" : "查找&#8194;",
    		"sUrl" : "",
    		"oPaginate" : {
    		"sFirst" : "第一页",
    		"sPrevious" : " 上一页 ",
    		"sNext" : " 下一页 ",
    		"sLast" : " 最后一页 "
    		}
    		}
    });
    var tt = new $.fn.dataTable.TableTools( table );
    
    $( tt.fnContainer() ).insertBefore('div.dataTables_wrapper');
    
});


/**
 * 修改,查看产品信息
 * @param productId
 */
function editProduct(productId, sign){
	
	if(sign==null){
		window.location.href = "editProduct?productId="+productId;
	}else{
		window.location.href = "editProduct?productId="+productId+"&sign="+sign;
	}
	
}

/**
 * 删除
 */
function delProduct(id){
	document.getElementById("productIdDel").value=id;
	$("#alertDel").show();
}


function delProd(){
	var productId = document.getElementById("productIdDel").value;
	$.ajax({
        type: "POST",
        url: "deleteProduct",  //换成你要请求的action, paperId 是url参数
        data: {'id':productId},
        dateType:'text',
        success: function(msg){
        	document.getElementById("alertDel").innerHTML = "删除成功！";
        	document.getElementById("delBtn").disabled = true;
			//$("#"+productId).remove();
        	document.location.reload();
        }
   });
}

function addNew(){
	window.location.href = "addProduct";
}

function back(){
	window.location.href = "/fcrm/vendor/vendorList";
}

function createQR(productId){
	window.location.href = "QRCode?productId="+productId;
}

</script>

</head>
<body>

	<div class="wrapper wrapper-content animated fadeInUp">
	<div class="row">
		<div class="col-lg-12">
                     <div class="ibox">	
						<div class="ibox-title clear">
								<div class="col-lg-11">
										<h5>
											<c:if test="${vendorView.vendor.logo != null }">
												<img alt="${vendorView.vendor.VName}"src="${imageUrl}${vendorView.vendor.logo }" id="productImage"width="50px" height="50px" />
											</c:if>
											<span class="v_title">&nbsp;${vendorView.vendor.VName }</span> 
										</h5>
								</div>
		                         <div class="col-lg-1">
		                             <a href="${ctx}/admin/vendorList" class="btn btn-success btn-block">返回商家列表</a>
		                         </div>
						</div>				
						<div class="ibox-content">
						<div class="row">
							<div class="v_img col-sm-5">
				                <div class="float-e-margins">
				                        <div class="carousel slide" id="carousel2">
				                            <ol class="carousel-indicators">
				                              <c:forEach var="img" items="${imgList }" varStatus="status">
				                              	
				                                <c:if test="${status.index == 0}">
					                                <li data-slide-to="${status.index }" data-target="#carousel2" class="active"></li>
				                                </c:if>
				                                <c:if test="${status.index > 0}">
					                                <li data-slide-to="${status.index }" data-target="#carousel2"></li>
				                                </c:if> 
				                    
				                              </c:forEach>
				                            </ol>
				                            <div class="carousel-inner">
				                            
				                            	<c:forEach var="img" items="${imgList }" varStatus="status">
				                       		
			                            			<c:if test="${status.index == 0}">
					                            		<div class="item active">
						                                    <img alt="image" class="img-responsive" src="${imageUrl}${img.img }" width="100%" style="height:400px;" />
						                                    <div class="carousel-caption">
						                                        <p></p>
						                                    </div>
						                                </div>
			                            			</c:if> 
			                            			<c:if test="${status.index > 0 }">
				                            			<div class="item">
						                                    <img alt="image" class="img-responsive" src="${imageUrl}${img.img }"  width="100%" style="height:400px;"/>
						                                    <div class="carousel-caption">
						                                        <p></p>
						                                    </div>
						                                </div>
			                            			</c:if>
				                            		
				                            	</c:forEach>
				                            	
				                               <!--  <div class="item active">
				                                    <img alt="image" class="img-responsive" src="http://www.zi-han.net/theme/hplus/img/p_big3.jpg">
				                                    <div class="carousel-caption">
				                                        <p>This is simple caption 1</p>
				                                    </div>
				                                </div> -->
				                                
				                            </div>
				                            <c:if test="${imgList != null && not empty imgList}">
					                            <a data-slide="prev" href="carousel.html#carousel2" class="left carousel-control">
			                                        <span class="icon-prev"></span>
			                                    </a>
			                                    <a data-slide="next" href="carousel.html#carousel2" class="right carousel-control">
			                                        <span class="icon-next"></span>
			                                    </a>
				                            </c:if> 
				                        </div>
				                </div>
							</div>
							<div class="v_info col-sm-7">
								<p><strong>营业执照：</strong>${vendorView.vendor.businessLicence}</p>
								<p><strong>公司地址：</strong>${vendorView.vendor.address}</p>
								<p><strong>联系人：</strong>${vendorView.vendor.linkman}</p>
								<p><strong>联系电话：</strong><span class="text-danger">${vendorView.vendor.tel}</span></p>
								<p><strong>网 址：</strong><a class="text-success" href="${vendorView.vendor.website}" target="_blank">${vendorView.vendor.website}</a></p>
								<c:if test="${not empty vendorView.extraColumnList }">
									<c:forEach var="ec" items="${vendorView.extraColumnList }"
										varStatus="status">
										<p><strong>${ec.cName}：</strong>${ec.cValue }</p>
									</c:forEach>
								</c:if>
							    <p><strong>公司简介：</strong>${vendorView.vendor.info }</p>
							</div>
						</div>
						</div>
					</div>

					<div class="ibox">
							<div class="ibox-title">
								<div class="row">
									<div class="col-lg-11">
						                <h5>产品列表</h5>
						            </div>
						            <div class="col-lg-1">
						                <a onclick="addNew()" class="btn btn-success btn-block">新增产品</a>
						             </div>
					             </div>
				             </div>
						<div class="ibox-content">
							<div class="row-fluid">
								<div class="row-fluid">
									<!-- Button trigger modal -->

									<table id="example" class="table table-bordered table-hover text-center">
										<thead>
											<tr>
												<th class="text-center">编号</th>
												<th class="text-center">品名</th>
												<th class="text-center">品牌</th>
												<th class="text-center">生产许可证编号</th>
												<th class="text-center">参考价(元)</th>
												<th class="text-center">保质期(天)</th>
												<th class="text-center">产地</th>
												<th class="text-center">操作</th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${productList }" var="product"
												varStatus="status">
												<tr id='${product.id}'>
													<td>${status.count}</td>
													<td><a href="javascript:editProduct(${product.id}, 1)">${product.PName}</a></td>
													<td>${product.brand}</td>
													<td>${product.PLicense}</td>
													<td>${product.referPrice}</td>
													<td>${product.keepTime}</td>
													<td>${product.producePlace}</td>
													<td>
														<a onclick="editProduct(${product.id}, null)" class="btn btn-white btn-sm">
															<i class="fa fa-pencil"></i>&#8194;编辑
														</a>
														<a onclick="editProduct(${product.id}, 1)" class="btn btn-white btn-sm">
															<i class="fa fa-folder"></i>&#8194;查看
														 </a>
														<a onclick="createQR(${product.id })" class="btn btn-white btn-sm">
															<i class="fa fa-qrcode"></i>&#8194;生成二维码
														 </a>
														<a data-toggle="modal" data-target="#delModal" onclick="delProduct(${product.id})" class="btn btn-white btn-sm">
														   <i class="fa fa-trash-o"></i>&#8194;删除
														</a>
													</td>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div> 
				</div>

	
	</div>
	</div>

	<script type="text/javascript">
		$(function(){
			// adapt();
	        //状态改变
	        $(".btn_manage").click(function() {
	        	var id = $(this).parent().parent().attr('id');
	        	$.ajax({
	        		url : "dreamComeTrue.action",
	        		type : "post",
	        		data : "id=" + id ,
	        		dataType : "json",
	        		success : function(data) {
	        			if (data.success) {
	        				 location.reload();
	        			}
	        		}
	        	});
	        });
	   });
		
		function adapt(){ 
			var tableWidth = $("#productImage").width(); //表格宽度 
			var img = new Image(); 
			img.src =$('#productImage').attr("src") ; 
			var imgWidth = img.width; //图片实际宽度 
			if(imgWidth<tableWidth){ 
			$('#productImage').attr("style","width: auto"); 
			}else{ 
			$('#productImage').attr("style","width: 100%"); 
			} 
			}
	</script>

	<!-- Modal -->
	<div class="modal fade" id="delModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">提示</h4>
				</div>
				<div class="modal-body" id="alertDel">确定删除该条产品信息吗？</div>
				<div class="modal-footer">
					<input type="hidden" id="productIdDel" />
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" onclick="delProd()" class="btn btn-primary"
						id="delBtn">删除</button>
				</div>
			</div>
		</div>
	</div>

</body>
</html>